<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getMyApp, checkReuse, createSession } from "@/api/vap/cluster";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import WindowsPng from "@/assets/other/windows2.png";

const appList = ref([]);
onMounted(() => {
  getMyApp().then(res => {
    appList.value = res;
  });
});

const clickCard = (item: any) => {
  checkReuse(item.appIssue.id)
    .then(res => {
      if (res.possibility) {
        selectReuse(item.appIssue.id, res.hostSessionId);
      } else {
        window.open(
          window.location.origin +
            "#/desktop?id=" +
            res.hostSessionId +
            "&isReuse=" +
            "false" +
            "&isOpen=true" +
            "&appId=" +
            item.appIssue.id,
          res.hostSessionId
        );
      }
    })
    .catch(e => {
      console.log(e);
    });
};

const selectReuse = (appId: string, sessionId: string) => {
  ElMessageBox.confirm("当前操作存在可复用的会话，是否需要复用？", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "复用会话",
    cancelButtonText: "新开会话"
  })
    .then(() => {
      window.open(
        window.location.origin +
          "#/desktop?id=" +
          sessionId +
          "&isReuse=" +
          "true" +
          "&isOpen=true" +
          "&appId=" +
          appId,
        sessionId
      );
    })
    .catch((action: Action) => {
      console.log(action);
      if (action === "cancel") {
        // 创建新会话，然后使用新的会话id 打开新页面
        createSession(appId).then(res => {
          window.open(
            window.location.origin +
              "#/desktop?id=" +
              res.hostSessionId +
              "&isReuse=" +
              "false" +
              "&isOpen=true" +
              "&appId=" +
              appId,
            res.hostSessionId
          );
        });
      } else {
        ElMessage({
          type: "info",
          message: "您取消了打开应用操作"
        });
      }
    });
};
</script>

<template>
  <div>
    <el-card style="height: 85vh">
      <el-row>
        <div
          @click="clickCard(item)"
          v-for="item in appList"
          :key="item.appIssue.appId"
          class="app-div"
        >
          <img
            class="app-img"
            :src="
              item.appIssue.icon.length > 1 ? item.appIssue.icon : WindowsPng
            "
          />
          <div class="app-name-div">
            {{ item.appIssue.alias }}
          </div>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.app-div {
  width: 100px;
  height: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.app-div:hover {
  border: 1px solid rgb(247, 244, 245);
  font-size: 18px;
  background-color: rgb(244, 247, 242);
}

.app-img {
  width: 75px;
  height: 75px;
}

.app-name-div {
  width: 100px;

  display: -webkit-box;
  text-align: center;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
